<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /* 抽象全局标签，仅设置大小圆角等基本属性 */
        span.label {
            padding: 0 10px;
            border-radius: 3px;
            color: white;
        }
        /* 成功标签，绿色 */
        span.label-success {
            background: green;
        }
        /* 警告标签，橙色 */
        span.label-warning {
            background: orange;
        }
        /* --------------全局table属性-------------------- */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        table th, table td {
            text-align: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        tbody tr:nth-child(odd) {
            background-color: #f2f2f2;
        }

        /* --------------全局超链接按钮------------------ */
        a.btn {
            background-color: #f44336;
            color: white;
            padding: 10px 25px;
            text-decoration: none;
            display: inline-block;
            border-radius: 8px;
        }

        a.btn:hover {
            background-color: red;
        }
    </style>
</head>
<body>
<div class="main">
    <h3>学生信息</h3>
    <p>说明：以下为2046级学生名单，共4人，
        <span class="label label-success">成功加载3人</span>。
        <span class="label label-warning">警告：列表不包含降级学生</span>。
    </p>
    <table>
        <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>班级</th>
            <th>Email</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>郭立新</td>
            <td>软件工程2046级1班</td>
            <td>guo@example.com</td>
            <td><a href="#" class="btn">修改</a> <a href="#" class="btn">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>黄英</td>
            <td>软件工程2046级1班</td>
            <td>huang@example.com</td>
            <td><a href="#" class="btn">修改</a> <a href="#" class="btn">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>吕惠玲</td>
            <td>软件工程2046级2班</td>
            <td>lv@example.com</td>
            <td><a href="#" class="btn">修改</a> <a href="#" class="btn">删除</a></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
